<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ include file="/common/taglib.jsp" %>

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<%@ include file="/common/css.jsp" %>
<%@ include file="/common/javascript.jsp" %>

<script type="text/javascript">
<!--
jQuery(function(){

	// save
	jQuery( "#save" ).button().click(function(){
		jQuery("#action").val('saveEdit');
		var b = true;
		jQuery('#listTable tbody tr td input:text').each(function(){
			if(jQuery(this).attr('name') == 'orgCodes' && !jQuery(this).val()){
				jQuery('#msgDIV').html("<ui:message code="org.orgCode.notNull" isError="1"/>");
				b = false;
			}
			if(jQuery(this).attr('name') == 'orgNames' && !jQuery(this).val()){
				jQuery('#msgDIV').html("<ui:message code="org.orgName.notNull" isError="1"/>");
				b = false;
			}
			if(jQuery(this).attr('name') == 'orgExplains' && !jQuery(this).val()){
				jQuery(this).val(' ');
			}
		});
		if(b){
			jQuery("form").submit();
		}
	});
	
	// list table	
	jQuery("#listTable").listTable();

	// add new line
	jQuery('#listTable thead tr th:last').html('<a href="javascript:void(0)" onclick="addTableRow()"><spring:message code="addRow"/></a>');
});
//-->
</script>

<script type="text/javascript">
<!--
// add new row
function addTableRow(){
    var trlast = jQuery("#listTable tbody tr:last");
    if(trlast[0]){ // may undefined
        var rowOrder = parseInt(trlast.find('#rowOrders').val())+1;
        jQuery('#listTable tbody').last().append(jQuery("#rowTemplate").html());
        jQuery("#listTable tbody tr:last").find('#rowOrders').val(rowOrder);
    }else{
    	jQuery('#listTable tbody').last().append(jQuery("#rowTemplate").html());
    	jQuery("#listTable tbody tr:last").find('#rowOrders').val(1);
    }
    //reRowOrder();
    jQuery("#listTable").listTable();
}

// remove row
function removeTableRow(dom){
   var orgId = jQuery(dom).parent("td").parent("tr").find('#orgIds').val();
   var params = '&_=<%=System.currentTimeMillis()%>&orgId='+orgId;
   if(orgId){
	   if(orgId){
	    jQuery.ajax({
	        url:'<c:url value="/admin/organization.do?action=ajaxRemove"/>'+params,
	        cache:false,
	        async:false,
	        success:function(data){
	            if(data == 'true'){ // has child node
	            	jQuery('#msgDIV').html("<ui:message code="cant.delete.node.has.child" isError="1"/>");
	            } else if(data == 'false'){
	            	jQuery('#msgDIV').html("<ui:message code="org.remove.success"/>");
	                jQuery(dom).parent("td").parent("tr").remove(); 
	                //reRowOrder();
	            }
	        }
	    });
	   }
   }
}

/*
// 重排序号
function reRowOrder(){
    jQuery('#listTable tbody tr').each(function(i,e){
        jQuery(this).find('#rowOrders').val(i+1);
    });
}
*/
//-->
</script>
</head>

<body>
<div id="msgDIV" style="margin:0px; padding:0px;"><ui:message code="${code}" isError="${isError}"/></div>
	<fieldset>
		<form:form id="queryForm" method="post" action="/admin/organization.do">
		<form:hidden path="action"/>
		<form:hidden path="pageNo" id="pageNo"/>
		<form:hidden path="pageSize" id="pageSize"/>
		<form:hidden path="total" id="total"/>
		<form:hidden path="pageNumber" id="pageNumber"/>
		
		<form:hidden path="orgId" id="orgId"/>
		<form:hidden path="orgLevel" id="orgLevel"/>
		
			<table id="queryTable" class="ui-widget ui-widget-content"  style="width:100%">
					<thead>
						<tr class="ui-widget-header">
							<td colspan="4">
							<input type="button" id="save" value="<spring:message code="save"/>"/>
<!--								<input type="button" id="query" value="<spring:message code="query"/>"/>-->
<!--								<input type="button" id="new" value="<spring:message code="new"/>"/>-->
<!--								<input type="button" id="remove" value="<spring:message code="remove"/>"/>-->
								
<!--								<button id="query"><spring:message code="query"/></button>-->
<!--								<button id="new"><spring:message code="new"/></button>-->
<!--								<button id="remove"><spring:message code="remove"/></button>-->
							</td>
						</tr>
					</thead>
<!--				<tbody>-->
<!--					<tr>				-->
<!--						<td><spring:message code="org.orgCode"/></td>-->
<!--						<td><spring:message code="org.orgName"/></td>			-->
<!--						-->
<!--					</tr>-->
<!--					<tr>-->
<!--						<td><form:input path="orgCode"/></td>-->
<!--						<td><form:input path="orgName"/></td>-->
<!--						-->
<!--					</tr>-->
<!--				</tbody>-->
			</table>
			
	<table id="listTable" class="ui-widget ui-widget-content" style="width:100%">
		<thead>
			<tr class="ui-widget-header">
				<th><spring:message code="sequence"/></th>
				<th><spring:message code="org.orgCode"/></th>
				<th><spring:message code="org.orgName"/></th>
				<th><spring:message code="org.orgExplain"/></th>
				<th><spring:message code="operate"/></th>
			</tr>
		</thead>
		<tbody>
		<c:forEach var="obj" items="${list}" varStatus="status">
			<tr>
				<td><input type="hidden" id="orgIds" name="orgIds" value="${obj.orgId}"/>
					<input type="hidden" id="orgIsLeafs" name="orgIsLeafs" value="${obj.orgIsLeaf}"/>
				<input type="text" id="rowOrders" name="rowOrders" size="4" value="${obj.rowOrder}" readonly="readonly"/></td>
				<td><input type="text" id="orgCodes" name="orgCodes" size="12" value="${obj.orgCode}"/></td>
				<td><input type="text" id="orgNames" name="orgNames" size="12" value="${obj.orgName}"/></td>
				<td><input type="text" id="orgExplains" name="orgExplains" size="20" value="${obj.orgExplain}"/></td>
				<td>
<!--					<a href="<c:url value="/admin/org.do?action=edit&orgId="/>${obj.orgId}"><span><spring:message code="edit"/></span></a>-->
<!--					<a href="<c:url value="/admin/org.do?action=ajaxRemove&orgId="/>${obj.orgId}"><span><spring:message code="remove"/></span></a>-->
						<a href="javascript:void(0)" onclick="removeTableRow(this)"><span><spring:message code="removeRow"/></span></a>
				</td>
			</tr>
		</c:forEach>
		</tbody>
		
		<tfoot>
		<tr>
			<td colspan="9" align="right">
				<a href="#" onclick="paging(1)"><span><spring:message code="paging.first"/></span></a>
				<a href="#" onclick="paging(2)"><span><spring:message code="paging.prev"/></span></a>
				<a href="#" onclick="paging(3)"><span><spring:message code="paging.next"/></span></a>
				<a href="#" onclick="paging(4)"><span><spring:message code="paging.last"/></span></a>
				<spring:message code="paging.jump.to"/>
				<select id="pagingJumpId" onchange="pagingJump(this.value)">
					<c:forEach var="obj" begin="1" end="${command.pageNumber }">
						<option value="${obj}">${obj}</option>
					</c:forEach>
				</select>
				<spring:message code="paging.jump.to.number"/>
			</td>
		</tr>
		<script type="text/javascript"><!--		
			function paging(t){
				var pn = parseInt(jQuery('#pageNo').val());
				var pageNumber = parseInt(jQuery('#pageNumber').val());
				if(t == 1){
					jQuery('#pageNo').val(1);
				}else if(t == 2){
					if(pn > 1){
						jQuery('#pageNo').val(pn-1);
					} else { 
						var msg = "<ui:message code="paging.isFirst" isError="1"/>";
						jQuery('#msgDIV').html(msg); 
						return; }
				}else if(t == 3){
					if(pn < pageNumber){
						jQuery('#pageNo').val(pn+1);
					} else {
						var msg = "<ui:message code="paging.isLast" isError="1"/>";
						jQuery('#msgDIV').html(msg); 
						return; 
					}
				}else if(t == 4){
					var pagingFloat = parseFloat(jQuery('#total').val()/jQuery('#pageSize').val());
					var pagingInt   = parseInt(jQuery('#total').val()/jQuery('#pageSize').val());
					if(pagingFloat > pagingInt)
						jQuery('#pageNo').val(pagingInt+1);
					else
						jQuery('#pageNo').val(pagingInt);
				}
				jQuery("form").submit();
			}			
			function pagingJump(t){
				jQuery('#pageNo').val(t);
				jQuery("form").submit();
			}
			jQuery('#pagingJumpId').val(jQuery('#pageNo').val());
		//-->
		</script>
		</tfoot>
	</table>
	
		</form:form>
	</fieldset>
	
	    <table style="display: none;">
	    	<tbody id="rowTemplate">
			<tr>
				<td>
				<input type="hidden" id="orgIds" name="orgIds" value="_"/>
				<input type="hidden" id="orgIsLeafs" name="orgIsLeafs" value="1"/>
				<input type="text" id="rowOrders" name="rowOrders" size="4" value="" readonly="readonly"/></td>
				<td><input type="text" id="orgCodes" name="orgCodes" size="12" value=""/></td>
				<td><input type="text" id="orgNames" name="orgNames" size="12" value=""/></td>
				<td><input type="text" id="orgExplains" name="orgExplains" size="20" value=""/></td>
				<td>
<!--					<a href="<c:url value="/admin/org.do?action=edit&orgId="/>${obj.orgId}"><span><spring:message code="edit"/></span></a>-->
					<a href="javascript:void(0)" onclick="removeTableRow(this)"><span><spring:message code="removeRow"/></span></a>
				</td>
			</tr>
			</tbody>
        </table>
        
</body>

</html>
